<template>
  <div class="page-preview">
    <!-- 顶部工具栏 -->
    <div class="toolbar">
      <div class="left">
        <el-button @click="goBack">
          <el-icon><Back /></el-icon>
          返回
        </el-button>
        <span class="page-title">{{ page?.name || '页面预览' }}</span>
      </div>
      <div class="right">
        <el-button-group>
          <el-button type="primary" @click="editPage">
            <el-icon><Edit /></el-icon>
            编辑
          </el-button>
          <el-dropdown @command="handleExport">
            <el-button type="primary">
              <el-icon><Download /></el-icon>
              导出
              <el-icon class="el-icon--right"><ArrowDown /></el-icon>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="pdf">导出PDF</el-dropdown-item>
                <el-dropdown-item command="image">导出图片</el-dropdown-item>
                <el-dropdown-item command="json">导出配置</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-button-group>
      </div>
    </div>

    <!-- 预览内容 -->
    <div class="preview-container">
      <div class="preview-content">
        <!-- 根据页面类型显示不同的预览内容 -->
        <template v-if="page?.type === 'form'">
          <el-form
            :model="formData"
            label-width="100px">
            <template v-for="comp in page?.components" :key="comp.id">
              <el-form-item :label="comp.label">
                <component
                  :is="getFormComponent(comp.type)"
                  v-model="formData[comp.field]"
                  v-bind="comp.props"
                  disabled />
              </el-form-item>
            </template>
          </el-form>
        </template>

        <template v-else-if="page?.type === 'list'">
          <el-table :data="tableData" border stripe>
            <template v-for="col in page?.components" :key="col.id">
              <el-table-column
                :prop="col.field"
                :label="col.label"
                v-bind="col.props" />
            </template>
          </el-table>
        </template>

        <template v-else-if="page?.type === 'detail'">
          <el-descriptions :column="2" border>
            <template v-for="item in page?.components" :key="item.id">
              <el-descriptions-item :label="item.label">
                {{ detailData[item.field] }}
              </el-descriptions-item>
            </template>
          </el-descriptions>
        </template>

        <template v-else-if="page?.type === 'dashboard'">
          <el-row :gutter="20">
            <template v-for="chart in page?.components" :key="chart.id">
              <el-col :span="chart.props?.span || 24">
                <div class="chart-wrapper">
                  <div class="chart-title">{{ chart.label }}</div>
                  <div :id="'chart-' + chart.id" class="chart-container"></div>
                </div>
              </el-col>
            </template>
          </el-row>
        </template>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { Back, Edit, Download, ArrowDown } from '@element-plus/icons-vue'
import * as echarts from 'echarts'

const route = useRoute()
const router = useRouter()

// 页面数据
const page = ref(null)
const formData = ref({})
const tableData = ref([])
const detailData = ref({})
const charts = ref([])

// 加载页面数据
const loadPage = async () => {
  try {
    // 模拟API调用
    page.value = {
      id: route.params.id,
      name: '示例页面',
      type: 'form',
      components: [
        {
          id: 1,
          type: 'input',
          label: '名称',
          field: 'name',
          props: {
            placeholder: '请输入名称'
          }
        }
      ]
    }

    // 根据页面类型加载不同的数据
    if (page.value.type === 'form') {
      loadFormData()
    } else if (page.value.type === 'list') {
      loadTableData()
    } else if (page.value.type === 'detail') {
      loadDetailData()
    } else if (page.value.type === 'dashboard') {
      loadChartData()
    }
  } catch (error) {
    ElMessage.error('加载页面失败')
  }
}

// 加载表单数据
const loadFormData = () => {
  formData.value = {
    name: '示例数据'
  }
}

// 加载列表数据
const loadTableData = () => {
  tableData.value = [
    { id: 1, name: '示例数据1' },
    { id: 2, name: '示例数据2' }
  ]
}

// 加载详情数据
const loadDetailData = () => {
  detailData.value = {
    name: '示例数据',
    description: '这是一条示例数据'
  }
}

// 加载图表数据
const loadChartData = () => {
  // 初始化图表
  nextTick(() => {
    page.value.components.forEach(comp => {
      const chart = echarts.init(document.getElementById('chart-' + comp.id))
      chart.setOption(comp.props.option)
      charts.value.push(chart)
    })
  })
}

// 返回列表页
const goBack = () => {
  router.push('/page-builder/list')
}

// 跳转到编辑页面
const editPage = () => {
  router.push(`/page-builder/editor/${route.params.id}`)
}

// 处理导出
const handleExport = (type) => {
  ElMessage.success(`导出${type}成功`)
}

// 获取表单组件
const getFormComponent = (type) => {
  const map = {
    input: 'el-input',
    select: 'el-select',
    radio: 'el-radio-group',
    checkbox: 'el-checkbox-group',
    date: 'el-date-picker'
  }
  return map[type] || 'el-input'
}

// 组件卸载时清理图表实例
onUnmounted(() => {
  charts.value.forEach(chart => {
    chart.dispose()
  })
})

// 初始化加载
onMounted(() => {
  loadPage()
})
</script>

<style scoped>
.page-preview {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--el-bg-color);
}

.toolbar {
  height: 48px;
  padding: 0 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--el-border-color-light);
  background-color: var(--el-bg-color);
}

.page-title {
  margin-left: 16px;
  font-size: 16px;
  font-weight: bold;
}

.preview-container {
  flex: 1;
  padding: 20px;
  overflow: auto;
}

.preview-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
  background-color: var(--el-bg-color-overlay);
  border-radius: 4px;
  box-shadow: var(--el-box-shadow-light);
}

.chart-wrapper {
  padding: 16px;
  margin-bottom: 20px;
  background-color: var(--el-bg-color);
  border-radius: 4px;
  box-shadow: var(--el-box-shadow-lighter);
}

.chart-title {
  margin-bottom: 16px;
  font-size: 14px;
  font-weight: bold;
}

.chart-container {
  height: 300px;
}
</style> 